<template>
	<view>
		<u-popup :show="isShow" mode="bottom" @close="closePopup" closeable closeOnClickOverlay>
			<view class="pop-product">
				<u-sticky bgColor="#fff">
					<view class="pro-info el-flex">
						选购服务
					</view>
					
				</u-sticky>
				<view class="max5">
					<template v-if="multi_service_bargins&&multi_service_bargins.length!==0">
						<view class="mt2x">
							<view v-for="(serve,serveIndex) in multi_service_bargins" :key="serveIndex"
								style="padding-bottom: .2rem;">
								<view class="serve-title el-flex">
									<view class="serve-left el-flex">
										<text>{{serve.type_name}}</text>
									</view>
								</view>
								<view class="serve-group el-flex">
									<view class="serve-item " :class="{'serve-option-act':serveChild.isSelect}"
										@click="selectServeItem(serveIndex,childIndex)"
										v-for="(serveChild,childIndex) in serve.service_info"
										:ref='`serveItem${serveIndex}`' :data-index='childIndex' :key="childIndex">
										<view class="addition-tips" v-if="serveChild.act_diff">
											{{serveChild.act_diff}}
										</view>
										<text>{{serveChild.service_short_name}}</text><text>{{serveChild.service_price}}元</text>
									</view>

								</view>
							</view>
						</view>
					</template>
					<view class="btn-cart-bottom">
						<view class="action-cart-box el-flex">
							<view class="buy-cart-btn" @click="closePopup">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "pop-select-item",
		props: {
			multi_service_bargins: {
				type: Array,
				default: () => []
			},
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			closePopup() {
				this.$emit('closePopup')
			},
			selectServeItem(serveIndex, childIndex) {
				this.$emit('selectServeItem', {
					serveIndex: serveIndex,
					childIndex: childIndex
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-sticky {
		top: 0 !important;
	}

	/deep/.u-popup__content__close {
		z-index: 999;
		top: .288rem !important;
		right: .288rem !important;
	}

	/deep/.u-popup__content {
		border-top-left-radius: 0.24rem;
		border-top-right-radius: 0.24rem;
	}

	.pop-product {
		padding: 0 0.32rem 0.8rem 0.32rem;
		height: 9.92rem;
		overflow-y: scroll;
		max-height: 9.92rem;
		box-sizing: border-box;

		.pro-info {
			color: rgba(0, 0, 0, 0.9);
			font-size: .33rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: .163rem;
			padding-top: .32rem;
			position: relative;
		}

		.btn-cart-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;

			.action-cart-box {
				height: 1.04rem;
				padding: 0.12rem 0.31rem;

				.buy-cart-btn {
					height: 0.72rem;
					line-height: .72rem;
					background: url(../../static/images/icon-buy-tc.png) no-repeat;
					background-size: 100% 100%;
					border-radius: 0.4rem;
					color: #fff;
					display: block;
					text-align: center;
					width: 100%;
					font-size: .28rem;
				}
			}
		}
	}

	.max5 {
		padding: .2rem 0;

		&:last-child {
			padding-bottom: 0;
		}

		.mt2x {
			padding-bottom: .2rem;

			.option-title {
				display: flex;
				position: relative;
				margin-bottom: .2rem;
				font-size: .24rem;
				color: #000;
				font-weight: 700;
			}

		}

		.serve-title {
			justify-content: space-between;

			.serve-left {
				text {
					line-height: .24rem;
					color: rgb(0, 0, 0);
					font-size: .25rem;
				}
			}
		}

		.serve-group {
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-top: .16rem;



			.serve-item {
				line-height: .24rem;
				min-width: 0.64rem;
				position: relative;
				box-sizing: border-box;
				padding: 0.15rem 0.24rem;
				text-align: center;
				margin: 0 0.24rem 0.24rem 0;
				overflow: visible;
				border-radius: 0.28rem;
				border: 0.02rem solid transparent;
				background: rgba(0, 0, 0, .04);

				

				text {
					font-size: .22rem;
				}
			}

			.serve-option-act {
				color: #f56600;
				border: 0.02rem solid #ff5934;
				background: rgba(255, 89, 52, .08);
			}
		}


	}
</style>